<template>
  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" title="" width="80%" @close="handleClose">
    <div v-if="quData">
      <h3>试题内容</h3><el-card>
        <qu-item-show :value="quData" :mode="3" :show-num="false" :show-score="false" :show-type="true" :show-analysis="true" /> <!-- 子题目 -->
        <div v-if="quData.quType === 'mix'" style="margin-top: 20px">
          <div v-for="(sub,jj) in quData.subList" :key="sub.id" class="list-sub-box">
            <div class="list-sub-qu">
              <qu-item-show :value="sub" :mode="3" :index="jj" :show-type="true" :sub="true" :show-num="false" :show-score="false" :show-analysis="true" />
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>

import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow.vue'
import { fetchDetail } from '@/api/qu/qu'
import { mapGetters } from 'vuex'
export default {
  name: 'QuViewDialog',
  components: { QuItemShow },
  props: {
    quId: String,
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      quData: null,
      testForm: {
        answer: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  watch: {

    // 检测查询变化
    dialogShow: {
      handler() {
        this.dialogVisible = this.dialogShow
        if (this.dialogVisible && !this.quData) {
          this.showDetail()
        }
      },
      deep: true
    },

    quId: {
      handler() {
        this.showDetail()
      }
    }
  },

  created() {
    this.dialogVisible = this.dialogShow
    this.showDetail()
  },

  methods: {

    // 显示详情
    showDetail() {
      if (!this.quId) {
        return
      }
      fetchDetail(this.quId).then(res => {
        this.quData = res.data
      })
    },

    handleClose() {
      // 清空
      this.quData = null
      this.$emit('update:dialogShow', false)
    }
  }
}
</script>
<style scoped>

  ::v-deep .qu-box {
    margin-bottom: 0;
  }
  ::v-deep .qu-item {
    margin-bottom: 0;
  }
</style>
